<!--  -->
<template>
  <div class="welcome-guide" v-if="dialogVisible">
    <div class="guide-w guide-w1 animated fadeInLeft" v-if="shownum === 1">
      <img :src="guidewordsimg1"/>
      <div class="btn-w" @click="shownum = 2"></div>
    </div>
    <div class="guide-w guide-w2 animated fadeInRight" v-if="shownum === 2">
      <img :src="guidewordsimg2"/>
      <div class="btn-w" @click="shownum = 3"></div>
    </div>
    <div class="guide-w guide-w3 animated fadeInRight" v-if="shownum === 3">
      <img :src="guidewordsimg3"/>
      <div class="btn-w" @click="shownum = 4"></div>
    </div>
    <div class="guide-w guide-w4 animated fadeInUp" v-if="shownum === 4">
      <img :src="guidewordsimg4"/>
      <div class="btn-w" @click="shownum = 5"></div>
    </div>
    <div class="guide-w guide-w5 animated fadeInRight" v-if="shownum === 5">
      <img :src="guidewordsimg5"/>
      <div class="btn-w" @click="close"></div>
    </div>
    <div class="close-u" @click="close"></div>
    <div class="mask-g"></div>
  </div>
</template>

<script>
import guidewordsimg1 from '@/assets/images/guideimg/guidewords11.png'
import guidewordsimg2 from '@/assets/images/guideimg/guidewords12.png'
import guidewordsimg3 from '@/assets/images/guideimg/guidewords13.png'
import guidewordsimg4 from '@/assets/images/guideimg/guidewords14.png'
import guidewordsimg5 from '@/assets/images/guideimg/guidewords15.png'
export default {
  props: {
    changeStatueGuide: {
      type: Function
    }
  },
  data () {
    return {
      dialogVisible: false,
      status: 0,
      shownum: 1,
      guidewordsimg1: guidewordsimg1,
      guidewordsimg2: guidewordsimg2,
      guidewordsimg3: guidewordsimg3,
      guidewordsimg4: guidewordsimg4,
      guidewordsimg5: guidewordsimg5
    }
  },
  methods: {
    show (status) {
      this.status = status
      this.dialogVisible = true
      this.shownum = 1
      if (!this.status) {
        this.changeStatueGuide(1)
      }
    },
    close () {
      this.dialogVisible = false
      this.changeStatueGuide(this.status)
    }
  }
}

</script>
<style scoped lang="scss">
.mask-g{
  background: rgba(0,0,0,0.4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
}
.close-u{
  position: fixed;
  top: 25px;
  right: 50px;
  width: 30px;
  height: 30px;
  z-index: 10000;
  background: url(~@/assets/images/guideimg/close.png) no-repeat center;
  cursor: pointer;
}
.guide-w {
  position: fixed;
  z-index: 10000;
  img{
    max-width:100%;
    max-height: 100%;
  }
  .btn-w{
    position: absolute;
    width: 250px;
    height: 100px;
    cursor: pointer;
  }
}
.guide-w1 {
  top: 132px;
  left: 205px;
  max-width: 80%;
  img{
    max-height: calc(100vh - 145px);
  }
  .btn-w{
   right: 14%;
   bottom: 0;
  }
}
.guide-w2 {
  top: 100px;
  right: 75px;
  max-width: calc(100vw - 120px);
  img{
    max-height: calc(100vh - 90px);
  }
  .btn-w{
    right: 5%;
    bottom: 0;
  }
}
.guide-w3 {
  top: 305px;
  right: 137px;
  width: 435px;
  text-align: center;
  img{
    max-height: calc(100vh - 305px);
    }
  .btn-w{
   left: 50%;
   margin-left: -125px;
   bottom: 0;
  }
}
.guide-w4 {
  top: 10vh;
  right: 10vw;
  max-width: 80vw;
  img{
    max-height: 80vh;
    }
  .btn-w{
   right: 9%;
   bottom: 5%;
  }
}
.guide-w5 {
  top: 132px;
  right:10px;
  .btn-w{
   left: 70px;
   bottom: 10px;
  }
}
</style>
